<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style: none;
        }
       .banner{
           background: #222;
           width:100%;
           display: flex;
           justify-content: space-between;
           flex-wrap: nowrap;
       }
       .banner ul{
           height:430px;
           overflow: hidden;
       }
       .img{
           width:80%;
           position: relative;
       }
       .img li{
           position: absolute;
           height:430px;
       }
       .img li img{
           width:100%;
       }
       .text{
           width:20%;
           display: flex;
           flex-direction: column;
           justify-content: space-between;
       }
       .text li{
           height:33.333%;
           color:#fff;
           font-size: 25px;
       }
       .text li.active{
           background: darkgreen;
       }
    </style>
</head>
<body>
    <div class="banner">
        <ul class="img">
            <li><img src="images/1.webp"  alt=""></li>
            <li><img src="images/2.jpg"   alt=""></li>
            <li><img src="images/3.jpg"  alt=""></li>
        </ul>
        <ul class="text">
            <li class="active">张译黄志忠正邪较量</li>
            <li>尤长靖模仿NPC</li>
            <li>国庆70周年庆祝大会</li>
        </ul>
    </div>
    <script>
        var text = document.getElementsByClassName('text')[0];
        var tLi = text.getElementsByTagName('li');
        
        var img = document.getElementsByClassName('img')[0];
        var imgLi = img.getElementsByTagName('li');
        var zIndex = 0;
        for (var index = 0; index < tLi.length; index++) {
            var element = tLi[index];
            element['int'] = index;
            element.onmouseenter=function(){
                for (var i = 0; i < tLi.length; i++) {
                    var el = tLi[i];
                    el.classList.remove('active');
                }
                this.classList.add('active')
                imgLi[this.int].style.zIndex = zIndex ++
            }
        
        }
    </script>  
</body>
</html>